<template>
  <div ref="chart" style="height: 40vh"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["data", "xAxis"],
  mounted() {
    const chart = echarts.init(this.$refs.chart);

    const option = {
      tooltip: {
        trigger: "axis",
      },

      grid: {
        top: "20%",
        left: "5%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },

      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: this.xAxis,
          axisLine: {
            lineStyle: {
              color: "#000", // 设置 x 轴颜色为红色
            },
          },
        },
      ],
      yAxis: [
        {
          name: this.data.name,
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#000", // 设置 x 轴颜色为红色
            },
          },
        },
      ],
      series: [],
    };

    const itemData = {
      name: this.data.name,
      type: "line",
      stack: "Total",
      smooth: true,

      showSymbol: false,
      emphasis: {
        focus: "series",
      },
      data: this.data.data,
    };
    option.series.push(itemData);
    chart.setOption(option, true);
  },
  methods: {},
};
</script>
